<script setup>
import { Plus } from '@element-plus/icons-vue';
import { watch, getCurrentInstance, ref } from 'vue';
import { ElMessage as message } from 'element-plus';

import { getRemoteData } from './composition';
const props = defineProps(['conf', 'modelValue']);
const { appContext } = getCurrentInstance();
watch(
  () => props.conf.dataType,
  (newVal, oldVal) => {
    getRemoteData(appContext, props.conf);
  }
);
// 上传组件处理
const handleUploadChange = (fileList) => {
  console.log('文件列表变化:', fileList)
  // 可以在这里添加自定义处理逻辑
}
</script>
<template>
  <!-- 上传组件 -->
  <fancy-upload
    v-if="props.conf.compType === 'upload'"
    :conf="props.conf"
    v-model="props.conf.modelValue"
    @file-change="handleUploadChange"
  />
  <!-- Tree组件 -->
   <fancy-tree
    v-if="props.conf.compType === 'tree'"
    :conf="props.conf"
    v-model="props.conf.modelValue"
    @node-click="handleTreeNodeClick"
  />
  <el-input
    v-if="props.conf.compType === 'input'"
    v-model="props.conf.modelValue"
    :readonly="props.conf.readonly"
    :clearable="props.conf.clearable"
    disabled
    :placeholder="props.conf.placeholder"
    :suffix-icon="props.conf['suffix-icon']"
    :prefix-icon="props.conf['prefix-icon']"
  >
    <template #prepend v-if="props.conf.prepend !== ''">{{ props.conf.prepend }}</template>
    <template #append v-if="props.conf.append !== ''">{{ props.conf.append }}</template>
  </el-input>
  <!--下拉-->
  <el-select
    v-if="props.conf.compType === 'input'"
    v-model="props.modelValue"
    :placeholder="props.conf.placeholder"
    :multiple="props.conf.multiple"
    :collapse-tags="props.conf['collapse-tags']"
    disabled
    :filterable="props.conf.filterable"
    :clearable="props.conf.clearable"
  >
    <el-option
      :label="item.label"
      :value="item.value"
      :key="item"
      v-for="item in props.conf.options"
    >
    </el-option>
  </el-select>
  <!--下拉-->
  <el-select
    v-if="props.conf.compType === 'select'"
    v-model="props.modelValue"
    :placeholder="props.conf.placeholder"
    :multiple="props.conf.multiple"
    :collapse-tags="props.conf['collapse-tags']"
    disabled
    :filterable="props.conf.filterable"
    :clearable="props.conf.clearable"
  >
    <el-option
      :label="item.label"
      :value="item.value"
      :key="item"
      v-for="item in props.conf.options"
    >
    </el-option>
  </el-select>
  <!--单选-->
  <el-radio-group
    v-if="props.conf.compType === 'radio'"
    v-model="props.conf.modelValue"
    disabled
    :class="{ verticalDiv: props.conf.vertical }"
  >
    <el-radio
      :label="item.value"
      :key="item"
      v-for="item in props.conf.options"
      :border="props.conf.border"
      v-if="props.conf.optionType === 'default'"
    >
      {{ item.label }}
    </el-radio>
    <el-radio-button
      :label="item.value"
      :key="item"
      v-for="item in props.conf.options"
      v-if="props.conf.optionType === 'button'"
    >
      {{ item.label }}
    </el-radio-button>
  </el-radio-group>
  <!--多选-->
  <el-checkbox-group
    v-if="props.conf.compType === 'checkbox'"
    v-model="props.conf.modelValue"
    :clearable="props.conf.clearable"
    disabled
    :size="props.conf.size"
    :max="props.conf.max"
    :min="props.conf.min"
  >
    <div v-for="item in props.conf.options" v-if="props.conf.vertical">
      <el-checkbox
        :border="props.conf.border"
        :value="item.value"
        :key="item"
        v-if="props.conf.optionType === 'default'"
      >
        {{ item.label }}
      </el-checkbox>
      <el-checkbox-button :value="item.value" :key="item" v-if="props.conf.optionType === 'button'">
        {{ item.label }}
      </el-checkbox-button>
    </div>
    <div v-if="!props.conf.vertical">
      <el-checkbox
        :border="props.conf.border"
        :value="item.value"
        :key="item"
        v-for="item in props.conf.options"
        v-if="props.conf.optionType === 'default'"
      >
        {{ item.label }}
      </el-checkbox>
      <el-checkbox-button
        :value="item.value"
        :key="item"
        v-for="item in props.conf.options"
        v-if="props.conf.optionType === 'button'"
      >
        {{ item.label }}
      </el-checkbox-button>
    </div>
  </el-checkbox-group>
  <!--开关-->
  <el-switch
    v-if="props.conf.compType === 'Switch'"
    v-model="props.conf.modelValue"
    disabled
    :active-color="props.conf['active-color']"
    :inactive-color="props.conf['inactive-color']"
    :active-value="props.conf['active-value']"
    :inactive-value="props.conf['inactive-value']"
  >
  </el-switch>
  <!--计数器-->
  <el-input-number
    v-if="props.conf.compType === 'inputNumber'"
    v-model="props.conf.modelValue"
    :placeholder="props.conf.placeholder"
    :min="props.conf.min"
    :max="props.conf.max"
    :step="props.conf.step"
    :precision="props.conf.precision"
    :step-strictly="props.conf['step-strictly']"
    :controls-position="props.conf['controls-position']"
    disabled
    :readonly="props.conf.readonly"
    @change="handlerEmitValue"
  >
  </el-input-number>
  <!--多行文本-->
  <el-input
    v-if="props.conf.compType === 'textarea'"
    v-model="props.conf.modelValue"
    :readonly="props.conf.readonly"
    :clearable="props.conf.clearable"
    :type="props.conf.type"
    :placeholder="props.conf.placeholder"
    :maxlength="props.conf.maxlength"
    :show-word-limit="props.conf['show-word-limit']"
    disabled
    :rows="props.conf.rows"
    @change="handlerEmitValue"
  >
  </el-input>
  <!--滑块-->
  <el-slider
    v-if="props.conf.compType === 'slider'"
    v-model="props.conf.modelValue"
    :min="props.conf.min"
    :max="props.conf.max"
    :step="props.conf.step"
    :show-stops="props.conf['show-stops']"
    :show-tooltip="props.conf['show-tooltip']"
    :range="props.conf.range"
    disabled
  ></el-slider>
  <!--评分-->
  <el-rate
    v-if="props.conf.compType === 'rate'"
    v-model="props.conf.modelValue"
    disabled
    :max="props.conf.max"
    :allow-half="props.conf['allow-half']"
    :show-score="props.conf['show-score']"
  ></el-rate>
  <!--颜色选择器-->
  <el-color-picker
    v-if="props.conf.compType === 'colorPicker'"
    v-model="props.conf.modelValue"
    disabled
    :predefine="props.conf.predefine"
    :size="props.conf.size"
  ></el-color-picker>
  <!--级联选择器-->
  <el-cascader
    v-if="props.conf.compType === 'cascader'"
    v-model="props.conf.modelValue"
    disabled
    :clearable="props.conf.clearable"
    :size="props.conf.size"
    :show-all-levels="props.conf['show-all-levels']"
    :separator="props.conf.separator"
    :props="props.conf.props"
    :options="props.conf.options"
    :filterable="props.conf.filterable"
  ></el-cascader>
  <!--按钮-->
  <el-button
    v-if="props.conf.compType === 'button'"
    disabled
    :size="props.conf.size"
    :type="props.conf.type"
    :plain="props.conf.plain"
    :round="props.conf.round"
    :circle="props.conf.circle"
  >
    {{ props.conf.text }}
  </el-button>
  <!--分割线-->
  <el-divider
    v-if="props.conf.compType === 'divider'"
    :content-position="props.conf['content-position']"
  >
    {{ props.conf.text }}
  </el-divider>
  <!--提示-->
  <el-alert
    v-if="props.conf.compType === 'alert'"
    :title="props.conf.title"
    :type="props.conf.type"
    :effect="props.conf.effect"
    :center="props.conf.center"
    :closable="props.conf.closable"
    :close-text="props.conf['close-text']"
    :show-icon="props.conf['show-icon']"
    :description="props.conf.description"
  ></el-alert>
  <!--文字链接-->
  <el-link
    v-if="props.conf.compType === 'link'"
    :type="props.conf.type"
    :href="props.conf.href"
    :underline="props.conf.underline"
    :disabled="props.conf.disabled"
    :target="props.conf.target"
  >
    {{ props.conf.text }}
  </el-link>
  <!--文本-->
  <fancy-text
    v-if="props.conf.compType === 'text'"
    :align="props.conf.align"
    :size="props.conf.size"
    :bold="props.conf.bold"
    :color="props.conf.color"
  >
    {{ props.conf.text }}
  </fancy-text>
  <!--选择列表-->
  <fancy-dialog-list
    v-if="props.conf.compType === 'dialogList'"
    v-model="props.conf.modelValue"
    :disabled="props.conf.disabled"
    :title="props.conf.title"
    :multi="props.conf.multi"
    :showIndex="props.conf.showIndex"
    :action="props.conf.action"
    :height="props.conf.height"
    :colConf="props.conf.colConf"
    :dval="props.conf.dval"
    :dlabel="props.conf.dlabel"
  ></fancy-dialog-list>
  <!--条码-->
  <fancy-bar-code
    v-if="props.conf.compType === 'barCode'"
    :value="props.conf.modelValue"
    :format="props.conf.format"
    :lineColor="props.conf.lineColor"
    :background="props.conf.background"
    :height="props.conf.height"
    :fontSize="props.conf.fontSize"
  ></fancy-bar-code>
</template>
<style scoped>
.verticalDiv {
  width: auto;
  text-align: left;
  display: table;
}
</style>
